<template>
    <div class="item_simple">
        <table cellspacing=0 cellpadding=0  style='table-layout:fixed' class="item_simple_table">
            <colgroup>
                <col style="width:40px"/>
                <col v-for="(item,index) in listField" :key="index" :style='item.width'/>
                <col/>
            </colgroup>
            <tr>
                <th>NO.</th>
                <th v-for="(item,index) in listField" :key="index">
                    {{item.label}}
                </th>
                <th>&nbsp;</th>
            </tr>
            <template  v-for="(item2,index) in datanew[dataField]" >

                <tr :key="index"  @click="activeIndex=index" :class="{'actived':item2.isCheck,'noactive':!item2.isCheck} ">
                    <td style="text-align:center">
                        <el-checkbox v-model="item2.isCheck" @click.native="changeCheck(item2)"></el-checkbox></td>
                        <td v-for="(item,index2) in listField" :key="index2">
                        
                            <input-noborder   :id="item.id" :dataField="dataField" ref="inputs" :data="datanew" :exdata="index" :extype="item.extype" :exkey="item.exkey" @input="tableChangeData"  :isreadonly="(item.isReadOnly||item2.szi_ex33||item2.isReadOnly||item2.isreadonly)"  v-if="item.type=='text'&&item.id=='szi_ex2'" :gray="item2.isCheck ? 'N':'Y'"></input-noborder>
                            <input-noborder   :id="item.id" :dataField="dataField" ref="inputs" :data="datanew" :exdata="index" :extype="item.extype" :exkey="item.exkey" @input="tableChangeData"  :isreadonly="(item.isReadOnly||item2.isreadonly)"  v-if="item.type=='text'&&item.id!='szi_ex2'" :gray="item2.isCheck ? 'N':'Y'"></input-noborder>

                    
                        </td>
                   
                </tr>
                
            </template>
        </table>
    </div>
</template>
<script>
export default {
    props:["data","exkey",'dataField','listField'],
    components:{
        inputNoborder: function (resolve) {
            //异步组件写法
            require(['../input/input-noborder'], resolve)
        },
    },
    data(){
        return{
            postUrl:"/byg/funeral/getFuneralSfItemSimple",
            sType:"",
            sType2:"",
            sId:"",
            tableData:[],
            datanew:{},
            isChange:true
        }
    },
    created(){
        if(this.exkey){
            
            let ids=this.exkey.ids.split(".");
            this.sId=this.data[ids[0]][ids[1]]

            if(this.exkey.sType){
                this.sType=this.exkey.sType;
            }
            if(this.exkey.sType2){
                this.sType2=this.exkey.sType2;
            }
        }

        for(let i=0;i<this.listField.length;i++){
            this.listField[i].width=this.listField[i].width+"px";
        }
        console.log(this.listField,"listFields=============")
        this.loadSfItem();
    },
    methods:{
        loadSfItem(){
            this.$post("bygex",this.postUrl,{"sType":this.sType,"sId":this.sId,"sType2":this.sType2}).then(data=>{
                console.log("this.tableData=====================================")
                this.tableData=data;
                //this.datanew[this.dataField]=this.tableData
                this.$set(this.datanew,this.dataField,this.tableData)
                this.$set(this.data,"lcitem",JSON.parse(JSON.stringify(this.tableData)))
                //this.$set(this.data,this.dataField,this.tableData)
                console.log(this.dataField)
                console.log(this.data)
                console.log(this.tableData,"this.tableData==================================");
            })
        },
        tableChangeData(val){

        },
        changeCheck(item){
           
           
        }
    },
    watch:{
        data:{
            handler: function (newVal) {
                console.log(JSON.parse(JSON.stringify(this.data.item)),"watch2=============")
                let itemIds="";
                for(let i=0;i<this.data.item.length;i++){
                    let szi_ex8=this.data.item[i].szi_ex8;
                    let szi_ex2=this.data.item[i].szi_ex2;
                    let szi_ex4=this.data.item[i].szi_ex4;
                    let szi_ex5=this.data.item[i].szi_ex5;
                    itemIds=itemIds=="" ?szi_ex8:itemIds+","+szi_ex8;
                    for(let j=0;j<this.datanew.item.length;j++){
                        let szi_ex8_=this.datanew.item[j].szi_ex8;
                        console.log("szi_ex8===="+szi_ex8+"==="+szi_ex8_)
                        if(szi_ex8==szi_ex8_&&!this.datanew.item[j].isCheck){
                            this.$set(this.datanew.item[j],"isCheck",true);
                            this.$set(this.datanew.item[j],"szi_ex4",szi_ex4);
                            this.$set(this.datanew.item[j],"szi_ex5",szi_ex5);
                        }else if(szi_ex8==szi_ex8_){

                            console.log("szi_ex4========"+szi_ex4+"=="+szi_ex5)
                            this.$set(this.datanew.item[j],"szi_ex4",szi_ex4);
                            this.$set(this.datanew.item[j],"szi_ex5",szi_ex5);
                        }
                    }
                }

                for(let j=0;j<this.datanew.item.length;j++){
                    let szi_ex8_=this.datanew.item[j].szi_ex8;
                    if((","+itemIds+",").indexOf(","+szi_ex8_+",")==-1&&this.datanew.item[j].isCheck){
                        this.$set(this.datanew.item[j],"isCheck",false);
                        this.$set(this.datanew.item[j],"szi_ex4","1");
                        this.$set(this.datanew.item[j],"szi_ex5",this.datanew.item[j].szi_ex2);
                    }
                }
                
                
            },
            deep:true
        },
        datanew:{
            handler: function (newVal) {
                console.log("datanew========================")
                let datas=[];
                let inputs=this.$refs.inputs;
                for(let i=0;i<this.datanew[this.dataField].length;i++){
                    if(this.datanew[this.dataField][i].isCheck){
                        datas.push(this.datanew[this.dataField][i])


                        let start=i*this.listField.length;
                        let end=(i+1)*this.listField.length;
                        for(let h=start;h<end;h++){
                            try{
                                if(inputs.length>=h)
                                    inputs[h].setBackColor(false)
                            }catch(e){}
                            
                        }
                        
                    }else{
                        
                        let szi_ex8=this.datanew[this.dataField][i].szi_ex8;
                        let index=-1;
                        console.log(this.data.item,"this.data.item====")
                       /* for(let j=0;j<this.data.item.length;j++){
                            let szi_ex8_=this.data.item[j].szi_ex8;
                           
                            if(szi_ex8==szi_ex8_){
                                index=j;
                            }
                        }
                        console.log("lcSelectIndex============="+index+"=="+szi_ex8)
                        this.$delete(this.data[this.dataField],index);
                       */
                        let start=i*this.listField.length;
                        let end=(i+1)*this.listField.length;
                        for(let h=start;h<end;h++){
                            try{
                                if(inputs.length>=h)
                                    inputs[h].setBackColor(true)
                            }catch(e){}
                            
                        }
                    }
                }
                this.$set(this.data,this.dataField,JSON.parse(JSON.stringify(datas)))

                console.log(JSON.parse(JSON.stringify(this.data.item)),"watch22=============")

            },
            deep:true
        }
    }
}
</script>
<style scoped>
.item_simple_table{
    width:100%;
}
.item_simple_table th{
    height:30px;
    background:#409EFF;
    font-size:16px;
    color:#fff;
}


.item_simple_table td{
    height:30px;
    font-size:16px;
    border:1px solid #ddd;
}
.noactive{
    background:#ddd;
}
</style>